<template>
  <div class="renting_house_details">
    <div class="top_back">
      <top-go-back></top-go-back>
    </div>
    <div>
      <house-swipe :swipeContent="swipeContent" :videoUrl="videoUrl"></house-swipe>
    </div>
    <!-- 标题 -->
    <h1 class="renting_house_details_title">2000元/月 富力红树湾 度假宜居之地 精装两房 采光通透</h1>
    <!-- 标签 -->
    <ul class="renting_house_details_label">
      <li>整租</li>
      <li>南北通透</li>
      <li>采光好</li>
    </ul>
    <!-- 价格 -->
    <div class="renting_house_details_price">
      <span>850元/月</span>
      <span>1室1厅1卫</span>
      <span>40平</span>
    </div>
    <!-- 基本资料 -->
    <info />
    <!-- 房源描述 -->
    <house-description />
    <!-- 房屋配置 -->
    <housing-allocation />
    <!-- 小区信息 -->
    <village />
    <!--周边配套-->
    <div v-if="buildDataContent.position" class="build_matching">
      <div class="matching_title">
        <div>周边配套</div>
        <!--<div>更多</div>-->
      </div>
      <div class="matching_map">
        <build-map v-if="buildDataContent.position" :buildName="buildDataContent.name" :positionArray="buildDataContent.position"></build-map>
      </div>
    </div>
    <!-- 附近推荐 -->
    <div class="recommend">
      <div class="title">
        <div>附近推荐</div>
      </div>
      <!-- 列表 -->
      <div class="recommend_list">
        <renting-list :houseListData="rentingData" />
      </div>
    </div>
    <build-nav :titleType="1" :userData="userData" />
  </div>
</template>

<script>
import TopGoBack from "../../components/common/TopGoBack";
import HouseSwipe from "../../components/house/HouseSwipe";
import Info from "../../components/renting/DetailInfo.vue";
import HouseDescription from "../../components/renting/HouseDescription.vue";
import HousingAllocation from "../../components/renting/HousingAllocation.vue";
import Village from "../../components/renting/Village.vue";
import BuildMap from "../../components/house/BuildMap";
import RentingList from '../../components/listComponents/RentingList'
import BuildNav from '../../components/common/BuildNav'
export default {
  name: "RentingHouseDetails",
  components: {
    HouseSwipe,
    TopGoBack,
    Info,
    HouseDescription,
    HousingAllocation,
    Village,
    BuildMap,
    RentingList,
    BuildNav
  },
  data() {
    return {
     userData:{
       photo: 'https://s1.ax1x.com/2018/09/27/iMLT4s.png',
       name: '无忧房',
       company_id: '无忧科技'
     },
      rentingData:[
          {
            "id":84,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          },
          {
            "id":84,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          },
          {
            "id":84,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          },
          {
            "id":84,
            "city_code":4601,
            "developer":"广汉市宏跃商贸有限公司",
            "area_code":460109,
            "title":null,
            "all_floor":null,
            "labels":['合租','南北通透','押一付一'],
            "sell":3000,
            "sell_average":30000,
            "building_year":2018,
            "ht_room_num":3,
            "ht_office_num":3,
            "in_acreage":null,
            "acreage":97,
            "name":"海甸上苑",
            "file":{
              "save_path":'https://kf.wuyoufang.cn/upload/premises/20180808/247a80b0e7686844e00ab0dafff823db.jpg'
            },
            "floor":{
              "title":"低层"
            },
            "area":{
              "region_name_c":"海口市"
            }
          }
        ],
      buildDataContent: {
        position: [116.404844, 39.915599],
        name: "天安门"
      },
      swipeContent: [
        {
          id: 30894,
          file_name: "5.jpg",
          thumb_url: "https://kf.wuyoufang.cn/upload",
          file_url:
            "https://kf.wuyoufang.cn/upload/premises/20180919/e4e311d6135a2cf569daf57ff24ac76a.jpg"
        },
        {
          id: 30895,
          file_name: "6.jpg",
          thumb_url: "https://kf.wuyoufang.cn/upload",
          file_url:
            "https://kf.wuyoufang.cn/upload/premises/20180919/f3e396d14fed2a5b8686a0a04e7c35b3.jpg"
        },
        {
          id: 30896,
          file_name: "4.jpg",
          thumb_url: "https://kf.wuyoufang.cn/upload",
          file_url:
            "https://kf.wuyoufang.cn/upload/premises/20180919/70278ca88b4d1af24523c35e96a890b7.jpg"
        },
        {
          id: 30897,
          file_name: "1.jpg",
          thumb_url: "https://kf.wuyoufang.cn/upload",
          file_url:
            "https://kf.wuyoufang.cn/upload/premises/20180919/6e35005f3de4687f72f64eeeafec258c.jpg"
        },
        {
          id: 30898,
          file_name: "2.jpg",
          thumb_url: "https://kf.wuyoufang.cn/upload",
          file_url:
            "https://kf.wuyoufang.cn/upload/premises/20180919/39dd22491ce713bc8aa00f30c0dfc388.jpg"
        }
      ],
      videoUrl: {
        id: 28398,
        file_name: "景园 . 悦海湾_微信版.mp4",
        thumb_url: "https://kf.wuyoufang.cn/upload",
        file_url:
          "https://kf.wuyoufang.cn/upload/premises/20180919/978289148c61b43f4e8481fd57bfed57.mp4"
      }
    };
  }
};
</script>

<style scoped>
.renting_house_details {
  position: relative;
}
.renting_house_details .top_back {
  position: absolute;
  width: 100%;
  left: 0;
  top: 10px;
  z-index: 99;
}

.renting_house_details_title {
  padding: 0 10px;
  margin: 10px 0 0;
  font-size: 1.15rem;
  font-weight: normal;
  color: #000;
}
.renting_house_details_label {
  list-style: none;
  padding: 0 10px;
  margin: 0;
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}
.renting_house_details_label li {
  padding: 2px 10px;
  margin-right: 10px;
}
.renting_house_details_label li:first-child {
  background: #ffebea;
  color: #e42229;
}
.renting_house_details_label li:nth-child(2) {
  background: #e0f1fb;
  color: #41acff;
}
.renting_house_details_label li:last-child {
  background: #fceadc;
  color: #fb660c;
}
.renting_house_details_price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding: 10px;
  border-top: 1px solid #eee;
  color: #e6191e;
}
.build_matching {
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}
.matching_title {
  font-size: 1.125rem;
  color: #000;
}
.matching_map {
  padding: 25px 0;
}
.recommend{
  padding: 25px 0 50px;
  border-top: 10px solid #F8F8F8;
}
.recommend .title{
  padding: 0 10px;
  font-size: 1.125rem;
  color: #000;
}
.recommend_list{
  padding: 5px 0;
}
</style>
